<template>
<div>
  <!--同意协议-->
  <Modal
      v-if="info"
      class-name="vertical-center-modal"
      :title="info.title"
      width="720"
      :mask-closable="false"
      v-model="escapePopup"
      :closable="false"
  >
    <div class="agreement-content ff-regular">
      <div v-html="info.content"></div>
    </div>

    <div slot="footer" class="pop-footer ff-regular">
      <div>
        <Checkbox v-model="consentAgreement">{{$t('public.iAcknowledge')}}</Checkbox>
      </div>
      <div>
        <Button @click="onClose">{{$t('user.cancel')}}</Button>
        <Button @click="onConfirm" :disabled="!consentAgreement" type="primary">{{$t('public.iKnow')}}</Button>
      </div>
    </div>
  </Modal>
</div>
</template>

<script>
import {contentDetail} from "@/api/content";

export default {
  name: "t-agreement",
  props: {
    id: [String, Number],
    value: Boolean, // 默认值
    status: Boolean
  },
  data() {
    return {
      info: '',
      escapePopup: this.value,
      consentAgreement: false, // 同意协议
    }
  },
  watch: {
    value () {
      this.escapePopup = this.value;
    },
  },
  created() {
    this.getContentDetail();
  },
  methods: {
    getContentDetail() {
      // 获取免责声明内容
      contentDetail({id:this.id}).then((res)=>{
        this.info = res.result;
      })
    },
    onClose() {
      this.$emit('input', false);
      this.$emit('close', this.consentAgreement);
    },
    onConfirm() {
      this.$emit('input', false);
      this.$emit('confirm', this.consentAgreement);
    }
  }
}
</script>

<style scoped lang="less">
.agreement-content {
  max-height: 60vh;
  overflow: auto;
}
.pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>